<template>
  <div class="center">
    <!-- 商品名称 -->
    商品分类:&ensp;<el-input
      v-model="parent"
      style="width: 470px"
      placeholder="请输入商品分类编号"
    /><br />

    <!-- 商品名称 -->
    商品名称:&ensp;<el-input
      v-model="title"
      style="width: 470px"
      placeholder="请输入商品名称"
      class="ipt1"
    /><br />

    <!-- 商品详情 -->
    <el-input
      v-model="content"
      style="width: 550px"
      :rows="4"
      type="textarea"
      placeholder="请输入商品详情信息"
      class="ipt2"
    /><br />

    <!-- 上传图片 -->
    上传图片:&ensp;<el-input
      v-model="coverImage"
      style="width: 470px"
      placeholder="请输入上传图片的链接"
      class="ipt1"
    /><br />

    <!-- 图片墙组件 -->
    <!-- action 后面跟的上传图片的接口地址 -->
    <!-- name 控制上传图片的的参数名--看接口文档 -->
    <el-upload
      v-model:file-list="fileList"
      action="http://localhost:1337/api/v1/admin/productcategory"
      name="img"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      id="img"
    >
      <el-icon><Plus /></el-icon>
    </el-upload>
    <br />

    <!-- 预览弹框 -->
    <el-dialog v-model="dialogVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
    <br />

    <!-- 发布按钮 -->

    <el-button type="primary" class="btn" @click="add">发布</el-button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { addRequest } from '@/api/product'
const parent = ref('')
const title = ref('')
const content = ref('')
const fileList = ref([])
const coverImage = ref('')

// 发布
function add() {
  console.log(fileList.value)

  let imgs = fileList.value.map((v) => {
    if (v.response) {
      //v 是刚刚上传的图片
      return v.response.fileUrl
    } else {
      return v.url
    }
  })
  console.log(imgs)

  addRequest(title.value, coverImage.value, content.value, parent.value).then((r) => {
    console.log(r.data)
    title.value = ''
    coverImage.value = ''
    content.value = ''
    parent.value = ''
  })
}
</script>

<style lang="css" scoped>
.center {
  width: 550px;
  margin: 0 auto;
}
.btn {
  width: 150px;
}
.ipt1,
.ipt2 {
  margin-top: 10px;
}
#img {
  margin-top: 10px;
}
</style>
